<template>
  <div :class="currentTheme">
    <el-button @click="changetheme">切换主题</el-button>
    <themeChild></themeChild>
  </div>
</template>

<script setup lang="ts">
import { computed, provide, ref, defineAsyncComponent } from "vue";
const themeChild = defineAsyncComponent(() => import("./themeChild.vue"));
const theme = ref("light");
const changetheme = () => {
  theme.value = theme.value === "light" ? "dark" : "light";
};

const currentTheme = computed(() => {
  return theme.value === "light" ? "light-theme" : "dark-theme";
});

provide("theme", theme);
</script>

<style>
.light-theme {
  background-color: white;
  color: black;
}
.dark-theme {
  background-color: black;
  color: white;
}
</style>